<template>
	<contents :heightInclude="['tabBar']" class="order_cancel_page">
		<u-form :model="form" ref="form" label-width="165">
			<u-form-item :label="$t('locales.reasonRefund')" prop="orderCancelRemarks">
				<u-input
					:border="false"
					type="select"
					:select-open="sheetShow"
					v-model="form.orderCancelRemarks"
					:placeholder="$t('locales.reasonRefundPlaceholder')"
					@click="sheetShow = true"
				></u-input>
			</u-form-item>
			<u-form-item
				:label="$t('locales.refundDoc')"
				prop="refundDoc"
				v-if="form.orderCancelRemarks == '其他'"
			>
				<u-input
					v-model="form.refundDoc"
					type="textarea"
					border
					auto-height
				/>
			</u-form-item>
			<!-- <u-form-item :label="$t('locales.uploadVoucher')" prop="orderCancelPictureList">
				<u-upload
					max-count="1"
					:action="`${uploadUrl}/file/upload`"
					@on-success="imgSuccess"
					@on-remove="uploadRemove"
				></u-upload>
			</u-form-item> -->
		</u-form>
		<u-action-sheet
			:list="sheetList"
			v-model="sheetShow"
			@click="sheetCallback"
		></u-action-sheet>
		<SubmitBtn @click="submit" />
	</contents>
</template>

<script>
import { baseUrl } from '@/config'
import { applyCancelOrder } from '@/api/http/order'
import SubmitBtn from '@/components/submitBtn'
export default {
	components: {
		SubmitBtn
	},
	data() {
		return {
			form: {
				id: '',
				orderCancelRemarks: '',
				orderCancelPictureList: [],
				refundDoc: ''
			},
			rules: {
				orderCancelRemarks: [
					{
						required: true,
						message: this.$t('locales.reasonRefundPlaceholder'),
						trigger: 'blur'
					}
				],
				refundDoc: [
					{
						required: true,
						message: this.$t('locales.refundDocPlaceholder'),
						trigger: 'blur'
					}
				],
			},
			sheetShow: false,
			sheetList: [
				{
					text: this.$t('locales.noGoods')
				},
				{
					text: this.$t('locales.shortage')
				},
				{
					text: this.$t('locales.deliveryLong')
				},
				{
					text: this.$t('locales.other')
				}
			],
			uploadUrl: baseUrl()
		}
	},
	onLoad(opt) {
		this.form.id = opt.id
	},
	onReady() {
		this.$refs.form.setRules(this.rules)
	},
	methods: {
		sheetCallback(index) {
			uni.hideKeyboard()
			this.form.orderCancelRemarks = this.sheetList[index].text
		},
		imgSuccess(data) {
			if (data.code === 200) {
				this.form.orderCancelPictureList = [data.data.objectName]
			} else {
				uni.showToast({
					icon: 'none',
					title: res.message
				})
			}
		},
		// 移除图片
    uploadRemove() {
      this.form.orderCancelPictureList = []
    },
		submit() {
			this.$refs.form.validate(valid => {
				if (!valid) return
				applyCancelOrder({
					...this.form
				}).then(res => {
					if (res.code === 200) {
						uni.redirectTo({
							url: '/pages/order/details/index?id=' + this.form.id
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.order_cancel_page {
	.u-form {
		padding: 0 30rpx;
		background-color: #fff;
	}
}
</style>
